/*
 * @Author: silas 
 * @Date: 2021-04-01 16:51:27 
 * @Last Modified by: silas
 * @Last Modified time: 2021-08-04 14:34:57
 */
<template>
  <div class="tobBtoC">
    <div>
      <el-form :inline="true" :model="form" label-width="60px" class="formList">
        <el-form-item label="账期" style="width: 15%">
          <el-date-picker style="width: 140px" v-model="form.time" type="month" placeholder="选择账期" value-format="yyyyMM" @change="handle_search"></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 40%;">
          <el-button style="margin-left: 20px" size="mini" type="primary" @click="handle_search">查询</el-button>
          <el-button size="mini" type="orange" @click="handle_export()">
            导出
          </el-button>
          <el-button size="mini" @click="dialogVisible = true; importForm.month = '';">刷新数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="remark">
      <span class="attention">备注:</span>
      <span> {{remarkObj.remark}}</span>
    </div>
    <div class="table-content clearfix">
      <div class="content">
        <div class="tableBox">
          <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" border stripe ref="table">
            <el-table-column min-width="120" prop="areaName" label="区域" />
            <el-table-column min-width="140" prop="bilinearComple" label="双线收入完成率" v-if="remarkObj.isShowDoubleLine !=1 " />
            <el-table-column min-width="140" prop="pardonComple" label="宽带净增用户完成率" />
            <el-table-column min-width="140" prop="stockComple" label="存量端口利用率完成率" />
            <el-table-column min-width="140" prop="box0Comple" label="0箱体占比完成率" />
            <el-table-column min-width="140" prop="box1Comple" label="1箱体占比完成率" />
            <el-table-column min-width="140" prop="evaluaXs" label="本月评价系数（小于等于1)" />
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog title="刷新数据" append-to-body :visible.sync="dialogVisible" width="300px">
      <el-form :model="importForm" ref="importForm" :rules="rules">
        <el-form-item label="日期" prop="month" label-width="80px">
          <el-date-picker style="width: 140px;" v-model="importForm.month" type="month" size="mini" placeholder="选择年月" value-format="yyyyMM" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <div class="dialog-footer">
          <el-button size="mini" type="primary" @click="handle_refresh()">确定</el-button>
          <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
const exportUrl = prefixAPI.pack;
export default {
  name: "evaluate",
  data() {
    return {
      form: {
        time: "",
      },
      remarkObj: {
        isShowDoubleLine: "",
        remark: "",
      },
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      importForm: {
        month: "",
      },
      rules: {
        month: [{ required: true, message: "请选择日期", trigger: "blur" }],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
    };
  },
  mounted() {},
  methods: {
    init() {
      let that = this;

      that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      that.form.areaId = that.accountInfo.areaId;
      // that.form.time = that.moment().format("YYYYMM");
      that.getMonth();
    },
    async getNetWorkRemark(time) {
      this.remarkObj.remark = "";
      if (time) {
        let acctYear = this.moment(time).format("YYYY");
        let { content } = await this.fetch($budgetAPI.getNetWorkRemark, {
          acctYear,
        });

        await this.$nextTick();
        this.remarkObj = content;
      } else {
        this.remarkObj.remark = "";
      }
    },
    getMonth() {
      var token = getCookie("token");
      $budgetAPI.getEvaluateMonth(
        {
          token,
        },
        (res) => {
          this.form.time = res.content;
          this.getNetWorkRemark(res.content);
          this.getData();
        }
      );
    },
    getData() {
      var that = this;

      that.tableLoading = true;
      $budgetAPI.getEvaluateList(
        {
          acctMonth: that.form.time,
        },
        (res) => {
          console.log(res);
          if (res && res.code == 0) {
            that.tableData = res.content;
          }
          that.tableLoading = false;
        }
      );
    },
    handle_search() {
      this.getData();

      this.getNetWorkRemark(this.form.time);
    },
    handle_export() {
      var month = this.form.time,
        token = getCookie("token");

      window.open(
        `${exportUrl}/netWork/exportNetWorkEvaluaList?acctMonth=${month}&token=${token}`,
        "_self"
      );
    },
    handle_refresh() {
      var that = this;

      that.$refs["importForm"].validate((valid) => {
        if (valid) {
          $budgetAPI.lightEvlRefresh(
            {
              acctMonth: that.importForm.month,
            },
            (res) => {
              if (res.code == 0) {
                that.$message({
                  message: "刷新成功",
                  type: "success",
                });
                that.getData();
              } else {
                that.$message.error(res.message);
              }
              that.dialogVisible = false;
            },
            (err) => {
              that.dialogVisible = false;
            }
          );
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.remark {
  padding-top: 5px;
  text-align: left;
  .attention {
    font-weight: bold;
  }
}
.table-content {
  .table-header {
    display: flex;
    justify-content: space-between;
    .table-title {
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      span {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #418ee9;
        border-radius: 1000%;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 3px;
      }
    }
  }
  .content {
    margin-top: 15px;
  }
}
</style>
